<!-- 模板1 -->
<template>
    <div class="padding-container">
        <!-- 搜索栏 -->
        <el-card class="search">
            <!-- 使用el布局 -->
            <el-row>
                <!-- 左侧搜索信息占80% -->
                <el-col :span="20">
                    <el-col :span="8">
                        <div class="search_grop">
                            搜索名：
                            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchModel.name"
                                size="medium">
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="search_grop">
                            下拉框：
                            <el-select v-model="searchModel.typeId" clearable placeholder="请选择" size="medium">
                                <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="search_grop">
                            可以再添加，一行3个
                        </div>
                    </el-col>
                </el-col>
                <!-- 左侧搜索栏按钮占20% -->
                <el-col :span="4">
                    <el-col :span="12">
                        <div>
                            <el-button type="primary" v-waves plain size="medium" @click="search">搜索</el-button>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>
                            <el-button type="success" plain size="medium" @click="openEdit(null)">添加</el-button>
                        </div>
                    </el-col>
                </el-col>
            </el-row>
        </el-card>
        <!-- 显示栏 -->
        <el-card class="tables">
            <el-table height="430" :data="tableData" style="width: 100%" v-loading="tableLoading">
                <el-table-column type="index" label="#" width="80">
                    <template slot-scope="scope">
                        {{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地址" width="300" align="center">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="200" align="center">
                </el-table-column>
                <el-table-column prop="gmtCreate" label="时间" width="260" align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>测试1:</p>
                            <p>测试2:</p>
                            <p>测试3:</p>
                            <div slot="reference" class="name-wrapper">
                                <i class="el-icon-time"></i>
                                <span style="margin-left: 10px">{{ scope.row.date }}</span>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input v-model="searchModel.name" size="mini" placeholder="输入关键字搜索" />
                    </template>
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="mini" @click="openEdit(scope.row.id)">修改</el-button>
                        <el-button type="success" plain v-if="scope.row.stateName === '禁用'" size="mini"
                            @click="toggleStatus()">启用</el-button>
                        <el-button type="warning" plain v-else size="mini" @click="toggleStatus()">禁用</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <div class="page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchModel.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="searchModel.pageSize"
                :pager-count="11" layout="total, sizes, prev, pager, next, jumper" :total="total" align="center" background>
            </el-pagination>
        </div>
        <!-- 弹出框 -->
        <el-dialog v-el-drag :title="dialogTitle" :visible.sync="dialogVisible" width="75%" @close="handleClose">
            <!-- 弹出框详细内容 -->

            <!-- 弹出框尾部插槽 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false" :loading="btnLoading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import waves from "@/directives/waves/index.js"
import ElDrag from "@/directives/ElDrag/index.js"
export default {
    directives: {
        waves,
        ElDrag
    },
    data() {
        return {
            // 表格加载
            tableLoading: false,
            // 按钮加载
            btnLoading: false,
            // 搜索条件 + 页数 + 每页显示条目数 ，前端发起请求可以直接传入 searchModel 对象
            searchModel: {
                pageNo: 1,
                pageSize: 10,
            },
            // 弹出窗标题
            dialogTitle: '',
            // 弹出窗显示
            dialogVisible: false,
            // 添加 点击的
            // 总条数
            total: 1500,
            // 表单数据
            form: {},
            // 列表数据
            list: [],
            // 表格数据
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }
                ,
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }
                ,
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    methods: {
        // 弹窗关闭触发
        handleClose() {
            console.log("关闭了");
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 搜索
        search() {
            console.log("这是搜索方法");
        },
        // 添加和修改都走这里
        openEdit(id) {
            if (id) {
                this.dialogTitle = '修改'            // 修改
            }
            else {
                this.dialogTitle = '添加'            // 添加
            }
            this.dialogVisible = true;
        },

        toggleStatus() {
            console.log("进行修改");
        }
    }
}
</script>

<style scoped>
.dialog-goods-form .title {
    display: inline-block;
    margin-bottom: 15px;
    font-size: 18px;
}

.dialog-goods-form .el-input {
    width: 400px;
}

.dialog-goods-form .el-select {
    width: 400px;
}

.dialog-goods-list {
    height: 350px;
    overflow-y: auto;
}
</style>